<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <title>订单</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/page/iframe/order.css">
    <link rel="stylesheet" href="../css/lib/element-ui.css">
    <script src="../js/lib/vue.js"></script>
    <script src="../js/lib/element-ui.js"></script>
</head>

<body>
    <div class="body" id="app">
        <header class="header">
            <el-button type="primary" size="mini"
                @click="dialogAddOrderFormVisible = true"
            >添加订单</el-button>
            <el-button type="danger" size="mini">删除订单</el-button>
            <el-button size="mini">拉入公海</el-button>
            <div style="flex-grow: 1;padding-left: 100px;">
                <el-tag
                    size="medium"
                    type="danger"
                    v-if="workloadVisible"
                    v-text="workloadTips"
                ></el-tag>
            </div>
            <el-form
                :model="searchForm"
            >
                <el-input placeholder="姓名/电话" size="mini"
                    :model="searchForm.keyword"
                >
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-form>
        </header>
        <main class="main" id="main">
            <el-table
                ref="multipleTable"
                :data="orders"
                :style="tableStyle"
                :height="height"
                @cell-click="handleRowClick"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    fixed
                    type="selection"
                    width="55"
                ></el-table-column>
                <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="48"
                    align="right"
                ></el-table-column>
                <el-table-column
                    fixed
                    prop="name"
                    label="姓名"
                    width="90"
                >
                    <template slot-scope="scope">
                        <el-input class="input" placeholder="姓名"
                            v-model="scope.row.name"
                            :disabled="false"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="性别"
                    width="48"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-input class="input center" placeholder="性别"
                            v-model="scope.row.sex"
                            :disabled="false"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="年龄"
                    width="48"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-input class="input center" placeholder="年龄"
                            v-model="scope.row.age"
                            :disabled="false"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="爸爸手机"
                    width="122"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-input class="input center" placeholder="爸爸手机"
                            v-model="scope.row.dadPhone"
                            :disabled="false"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="momPhone"
                    label="妈妈手机"
                    width="122"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-input class="input center" placeholder="妈妈手机"
                            v-model="scope.row.momPhone"
                            :disabled="false"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="followState"
                    label="跟进状态"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="下次联系日期"
                    width="170"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-date-picker class="date-picker"
                            v-model="scope.row.contactDate"
                            type="date"
                            placeholder="选择日期"
                            style="width: 150px"
                        >
                        </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column
                    label="家庭住址"
                >
                    <template slot-scope="scope">
                        <el-input class="input" placeholder="家庭住址"
                            v-model="scope.row.homeAddress"
                            :disabled="false"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="备注"
                >
                    <template slot-scope="scope">
                        <el-input class="input" placeholder="备注"
                            v-model="scope.row.notes"
                            :disabled="false"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="staff"
                    label="负责员工"
                    width="90"
                    fixed="right"
                    v-if="staffFieldVisible"
                ></el-table-column>
            </el-table>
            <div
                style="display: flex;justify-content: flex-end;"
            >
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="total"
                >
                </el-pagination>
            </div>
        </main>
        <el-dialog title="添加订单" :visible.sync="dialogAddOrderFormVisible">
            <el-form
                :model="orderAddForm"
                label-width="108px"
                ref="orderAddForm"
                :rules="rulesAddOrder"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="orderAddForm.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="orderAddForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="orderAddForm.age" placeholder="年龄"></el-input>
                </el-form-item>
                <el-form-item label="爸爸手机" prop="dadPhone">
                    <el-input v-model="orderAddForm.dadPhone" placeholder="爸爸手机"></el-input>
                </el-form-item>
                <el-form-item label="妈妈手机" prop="momPhone">
                    <el-input v-model="orderAddForm.momPhone" placeholder="妈妈手机"></el-input>
                </el-form-item>
                <el-form-item label="跟进状态" prop="followState">
                    <el-input type="textarea" v-model="orderAddForm.followState" placeholder="跟进状态"></el-input>
                </el-form-item>
                <el-form-item label="下次联系日期" prop="contactDate">
                    <el-date-picker class="date-picker"
                        v-model="orderAddForm.contactDate"
                        type="date"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="家庭住址" prop="homeAddress">
                    <el-input v-model="orderAddForm.homeAddress" placeholder="家庭住址"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="orderAddForm.notes" placeholder="备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitAddOrderForm('orderAddForm')">立即添加</el-button>
                </el-form-item>
            </el-from>
        </el-dialog>
        <el-dialog title="跟进状态" :visible.sync="dialogfollowStateFormVisible">
            <el-form
                :model="followStateForm"
                label-width="108px"
                ref="followStateForm"
                :rules="rulesAddOrder"
            >
                <el-form-item label="跟进状态" prop="followState">
                    <el-input class="el-input--high" type="textarea" v-model="followStateForm.followState" placeholder="跟进状态"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitfollowStateForm('followStateForm')">立即修改</el-button>
                </el-form-item>
            </el-from>
        </el-dialog>
    </div>
    <script src="../js/page/iframe/order.js"></script>
    <script>
        /* 操作区域的组件显示 */
        // 工作量提示条显示
        vm.workloadVisible = true;
        vm.workloadTips = '今日要完成100单，还差10单';

        /* 渲染订单数据 */
        // 后端输出的数据
        let ordersData = [
            {
                id: 88,
                name: '赵丽颖',
                sex: '女',
                age: 18,
                dadPhone: 17512562019,
                momPhone: 17512454333,
                followState: '正在开发中，开发啊，这个状态是开发啊，锄禾日当午，汗滴禾下土',
                contactDate: '2018-08-08',
                homeAddress: '江苏省南京市江宁科学园弘景大道1号',
                notes: '这是备注这是备注这是备注这是备注这是备注',
                staff: '张三' 
            },
            {
                id: 89,
                name: '赵丽颖',
                sex: '女',
                age: 18,
                dadPhone: 17512562019,
                momPhone: 17512454333,
                followState: '正在开发中，开发啊，这个状态是开发啊，锄禾日当午，汗滴禾下土',
                contactDate: '2018-08-08',
                homeAddress: '江苏省南京市江宁科学园弘景大道1号',
                notes: '这是备注这是备注这是备注这是备注这是备注',
                staff: '张三' 
            },
        ];
        // 生成订单模拟数据
        for (let i = 18; i > 0; i--) {
            ordersData.push({
                id: i,
                name: '赵丽颖',
                sex: '女',
                age: 18,
                dadPhone: 17512562019,
                momPhone: 17512454333,
                followState: '正在开发中，开发啊，这个状态是开发啊，锄禾日当午，汗滴禾下土',
                contactDate: '2018-08-08',
                homeAddress: '江苏省南京市江宁科学园弘景大道1号',
                notes: '这是备注这是备注这是备注这是备注这是备注',
                staff: '张三'
            });
        }
        // 负责员工字段显示
        vm.staffFieldVisible = false;
        // 插入到表格
        vm.orders = ordersData;
        
        /* 渲染分页数据 */
        // 当前页
        vm.currentPage = 1;
        // 页大小
        vm.pageSize = 20;
        // 总记录数
        vm.total = 10000;
    </script>
    <script>
        window.parent.closeIndexFullscreenLoading();
    </script>
</body>

</html>